<template>
	<!-- 各种弹窗的示例 -->
	<view class="pop">
		<view class="bottom_title">确定弹窗</view>
		{{show1}}
		<c-confirmPop :show="show1" title="这是标题" text="这是提示内容确定不？" @close="closeFn" @confirm="confirmFn"></c-confirmPop>
		<button @click="show1=true">打开取消/确认框</button>
		
		<view class="bottom_title">确定弹窗</view>
		{{show2}}
		<c-imgTipsPop :show="show2" title="这是标题" text="提交成功" :img="img" @close="closeFn"></c-imgTipsPop>
		<button @click="show2=true">打开3秒自动关闭确认框</button>
		
		<view class="bottom_title">确定弹窗</view>
		{{show3}}
		<c-tipsPop :show="show3" title="提示" text="提交成功" text2="提交成功2" @confirm="confirmFn"></c-tipsPop>
		<button @click="show3=true">打开3秒自动关闭确认框</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: require('../static/gou.png'),
				show1: false,
				show2: false,
				show3: false,
			}
		},
		methods:{
			// 确定按钮
			confirmFn(){
				console.log('点击确定了');
				this.closeFn()
			},
			// 关闭弹窗
			closeFn(){
				this.show1 = false
				this.show2 = false
				this.show3 = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop{
		padding: 30rpx;
		.bottom_title{
			margin: 30rpx 0 20rpx;
		}
	}
</style>